<template>
  <div class="page">
    <div class="page-list">
      <van-empty v-show="dataList.length <= 0" description="" />
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          :error.sync="errorLoading"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="page-list-item"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <div class="page-list-item-inner mid">
              <div
                v-show="item.status == '0'"
                class="operate"
                @click="moduleAction('withdraw', item)"
              >
                <van-icon name="revoke" />
              </div>
              <div
                v-show="item.status == '1'"
                class="operate"
                @click="moduleAction('qrcode', item)"
              >
                <van-icon name="qr" />
              </div>
              <div class="w100" @click="moduleAction('detail', item)">
                <van-row type="flex" justify="start" class="w100">
                  <van-col span="22" offset="1">
                    <van-row type="flex" justify="start">
                      <van-col span="24" class="mid mb10">
                        入校时间：{{ item.visit_date }}
                      </van-col>
                      <van-col span="24" class="mid mb10">
                        到访原因：{{ item.visit_reason_name }}
                      </van-col>
                      <van-col span="24" class="mid mb10">
                        申请时间：{{ item.apply_time }}
                      </van-col>
                      <van-col span="24" class="mid">
                        审核状态：{{ item.status_name }}
                      </van-col>
                    </van-row>
                  </van-col>
                </van-row>
              </div>
            </div>
            <div class="arrow mid">
              <img :src="url.icon_arrow_right" height="16" width="8" alt="箭头" />
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-overlay :show="qrCodeShow" @click="qrcodeClick">
      <div class="qrcode-box">
        <div class="qrcode-bg">
          <div id="qrcode"></div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import { getOutsiderList, updateWithdraw } from '@/api/school'

export default {
  data() {
    return {
      route: {},
      qrCodeShow: false,
      qrcode: {},
      page: {
        num: 1,
        total: 0,
      },
      url: {
        icon_arrow_right: require('../../assets/images/school/icon_arrow_golden.png'),
      },
      loading: true,
      errorLoading: false,
      finished: false,
      refreshing: false,
      dataList: [],
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.route = this.$route.query
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      this.onLoad()
    },
    getListAction() {
      const data = {
        pageNo: this.page.num,
        pageSize: 20,
        card_no: this.route.card_no,
      }
      getOutsiderList(data).then((ret) => {
        const data = ret.data
        if (data.errcode === 0) {
          this.dataList.push(...data.data.results)
          this.page.total = data.data.totalRecord
          this.page.num += 1
          if (data.data.pageNo >= data.data.totalPage) {
            this.finished = true
          }
        } else {
          this.errorLoading = true
        }
        this.loading = false
      })
    },
    onRefresh() {
      document.querySelector('html').scrollTop = '0'
      // 重置筛选数据
      this.checkedList = []
      // 清空列表数据
      this.finished = false
      this.refreshing = true
      // 重新加载数据
      this.loading = true
      this.page.num = 1
      this.onLoad()
    },
    onLoad() {
      // 异步更新数据
      // if (this.userInfo.cardNo) {
      if (this.refreshing) {
        this.dataList = []
        this.page.num = 1
        this.refreshing = false
      }
      this.getListAction()
      // } else {
      //   this.loading = false
      // }
    },

    moduleAction(type, item) {
      switch (type) {
        case 'detail':
          this.$router.push({
            path: '/school/outsider-detail',
            query: {
              id: item.id,
              visit_id: item.visit_id,
              type: 'detail',
            },
          })
          break
        case 'withdraw':
          this.$dialog
            .confirm({
              title: '是否确认撤回',
              message: '',
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              confirmButtonColor: '#D58913',
              beforeClose: async (action, done) => {
                if (action === 'confirm') {
                  const param = { id: item.id }
                  const updateData = await updateWithdraw(param)
                  if (updateData.data.errcode == 0) {
                    this.$toast('操作成功')
                    setTimeout(() => {
                      this.onRefresh()
                    }, 500)
                    done()
                  } else {
                    this.$toast(updateData.data.errmsg)
                    done()
                  }
                } else {
                  done()
                }
              },
            })
            .catch(() => {})
          break
        case 'qrcode':
          let qrcode = new QRCode('qrcode', {
            width: 200, //图像宽度
            height: 200, //图像高度
            text:
              'http://dalianyqschoolmobile.lngov.top/#/school/outsider-detail?id=' +
              item.id +
              '&visit_id=' +
              item.visit_id +
              '&type=confirm',
          })
          this.qrCodeShow = true
          break
      }
    },
    qrcodeClick() {
      this.qrCodeShow = false
      document.getElementById('qrcode').innerHTML = ''
    },
  },
}
</script>

<style lang="less" scoped>
.page {
  //padding: 10px;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  color: black;
  position: relative;

  &-list {
    box-sizing: border-box;
    width: 100%;

    & > :not(:last-child) {
      border-bottom: 1px solid #ededed;
    }

    .item-active {
      box-shadow: 0px 0px 5px 3px rgba(255, 145, 0, 0.8);
      border: 1px solid #ff9100;
    }

    &-item {
      margin-bottom: 20px;
      position: relative;

      .arrow {
        position: absolute;
        right: 15px;
        top: 35%;
        width: 40px;
        height: 40px;
      }

      &-inner {
        margin: 15px 10px;
        padding: 20px 40px 20px 30px;
        min-height: 80px;
        text-align: left;
        border-radius: 20px;
        background: #fff;
        position: relative;
        overflow: hidden;

        .operate {
          position: absolute;
          right: 0px;
          top: 0px;
          background-color: #ff9100;
          border-bottom-left-radius: 20px;
          padding: 7px 10px;
          color: #fff;
        }
      }
    }
  }
}
.qrcode-box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qrcode-bg {
  background-color: #fff;
  width: 250px;
  height: 250px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
